<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="$t('AlarmDetail')"
    width="1200px">
    <div class="base-info">
      <div class="form-table">
        <div class="form-table-item">
          <div class="form-table-item__lable">{{ $t('eqpId') }}</div>
          <div class="form-table-item__content">{{ form.eqpID }}</div>
        </div>
        <div class="form-table-item">
          <div class="form-table-item__lable">{{ $t('alarmId') }}</div>
          <div class="form-table-item__content">{{ form.alarmID }}</div>
        </div>
        <div class="form-table-item">
          <div class="form-table-item__lable">{{ $t('description') }}</div>
          <div class="form-table-item__content">{{ form.alarmDesc }}</div>
        </div>
        <div class="form-table-item">
          <div class="form-table-item__lable">{{ $t('AlarmStartTime') }}</div>
          <div class="form-table-item__content">{{ form.alarmStartTime }}</div>
        </div>
        <div class="form-table-item">
          <div class="form-table-item__lable">{{ $t('AlarmEndTime') }}</div>
          <div class="form-table-item__content">{{ form.alarmEndTime }}</div>
        </div>
        <div class="form-table-item">
          <div class="form-table-item__lable">{{ $t('IsSelfAlarm') }}</div>
          <div class="form-table-item__content">
            <el-tag :type="form.isEqpAlarm?'success':'danger'" effect="dark">{{ form.isEqpAlarm?$t('yes'):$t('no') }}</el-tag>
          </div>
        </div>
      </div>
    </div>
    <h3>{{ this.$t('LotDetail') }}</h3>
    <dynTable
      ref="dynTable"
      :loading="tableLoading"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
    <h3>{{ this.$t('LotActionDetail') }}</h3>
    <dynTable
      ref="dynTable"
      :loading="tableLoading"
      :table-data="tableActionData"
      :table-columns="tableActionColumns"
    />
  </el-dialog>
</template>

<script>
import { getInfo } from '@/api/alarm/history'
export default {
  name: 'AlarmHistoryForm',
  data() {
    return {
      dialogVisible: false,
      form: {},
      total: 0,
      listQuery: {
        page: 1,
        size: 10
      },
      tableData: [],
      tableActionData: [],
      tableLoading: true,
      tableColumns: [
        { prop: 'lotId', label: this.$t('LotNumebr') },
        { prop: 'lotPortId', label: this.$t('Port') },
        { prop: 'chamberId', label: this.$t('Chamber') },
        { prop: 'productId', label: this.$t('ProductName') },
        { prop: 'carrierId', label: 'Carrier ID', width: '100px' },
        { prop: 'batchId', label: 'Batch ID', width: '200px' },
        { prop: 'reserved', label: 'Reserved', width: '100px' },
        { prop: 'state', label: 'State' }
      ],
      tableActionColumns: [
        { prop: 'eqpID', label: this.$t('eqpId') },
        { prop: 'alarmID', label: this.$t('alarmId') },
        { prop: 'systemTime', label: this.$t('SystemTime') },
        { prop: 'alarmAction', label: this.$t('ExecAction') },
        { prop: 'result', label: this.$t('ExecResult'), templete: (_scope) => {
          return (
            <el-tag type={this.tagType(_scope.row.result)} effect='dark'>
              { this.tagStatus(_scope.row.result) }</el-tag>
          )
        } },
        { prop: 'relatedPersons', label: this.$t('RelatedInfo') },
        { prop: 'remark', label: this.$t('remark') }
      ]
    }
  },
  methods: {
    async handleOpen(id) {
      const res = await getInfo({ id })
      this.form = res.data
      this.tableData = res.data.lotInfo
      this.tableActionData = res.data.actionInfo
      this.tableLoading = false
      this.dialogVisible = true
    },
    async handleClose() {
      // 关闭弹窗初始化data 会闪现 el-tag 为否字样
      new Promise(resolve => {
        this.dialogVisible = false
      }).then(() => {
        Object.assign(this.$data, this.$options.data.call(this))
      })
    },
    tagType(type) {
      const mapTagType = {
        0: '',
        1: 'success',
        2: 'danger'
      }
      return mapTagType[type]
    },
    tagStatus(type) {
      const mapTagStatus = {
        0: this.$t('Processing'),
        1: this.$t('Successful'),
        2: this.$t('Failed')
      }
      return mapTagStatus[type]
    }
  }
}
</script>

<style scoped lang="scss">
.form-table{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .form-table-item{
    width: 48%;
    display: flex;
    margin-bottom: 20px;
    height: 40px;
    .form-table-item__lable{
      width: 120px;
      text-align: right;
      padding-right: 12px;
      font-size: 14px;
      color: #606266;
      font-weight: 700;
      vertical-align: middle;
      line-height: 40px;
    }
    .form-table-item__content{
      display: flex;
      align-items: center;
      flex: 1;
    }
  }
}
</style>
